<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"crack_of_dawn.gitee.io","root":"/blog/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="亦是生活亦是痴">
<meta property="og:type" content="website">
<meta property="og:title" content="懓强@博客">
<meta property="og:url" content="https://crack_of_dawn.gitee.io/blog/index.html">
<meta property="og:site_name" content="懓强@博客">
<meta property="og:description" content="亦是生活亦是痴">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="苑建胜">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://crack_of_dawn.gitee.io/blog/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>

  <title>懓强@博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">懓强@博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">记录每一点进步</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="archive fa-fw"></i>归档<span class="badge">2</span></a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content index posts-expand">
            
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://crack_of_dawn.gitee.io/blog/2020/11/21/my-new/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.gif">
      <meta itemprop="name" content="苑建胜">
      <meta itemprop="description" content="亦是生活亦是痴">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="懓强@博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2020/11/21/my-new/" class="post-title-link" itemprop="url">my new</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-11-21 20:12:24" itemprop="dateCreated datePublished" datetime="2020-11-21T20:12:24+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://crack_of_dawn.gitee.io/blog/2020/11/21/%E7%AC%AC%E5%8D%81%E7%AB%A0%20HTML/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.gif">
      <meta itemprop="name" content="苑建胜">
      <meta itemprop="description" content="亦是生活亦是痴">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="懓强@博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2020/11/21/%E7%AC%AC%E5%8D%81%E7%AB%A0%20HTML/" class="post-title-link" itemprop="url">HTML</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-11-21 18:54:19 / 修改时间：21:48:57" itemprop="dateCreated datePublished" datetime="2020-11-21T18:54:19+08:00">2020-11-21</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="第十章"><a href="#第十章" class="headerlink" title="第十章"></a>第十章</h1><h2 id="10-1-HTML介绍及规范"><a href="#10-1-HTML介绍及规范" class="headerlink" title="10.1 HTML介绍及规范"></a>10.1 HTML介绍及规范</h2><h3 id="10-1-1-介绍"><a href="#10-1-1-介绍" class="headerlink" title="10.1.1 介绍"></a>10.1.1 介绍</h3><ul>
<li>HTML指的是超文本标记/标签语言(Hyper Text Markup language)</li>
<li>普通的文本就是单词、字母</li>
<li>超文本：有一些单词和字母，在网页浏览器的世界中被赋予特殊的权利</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>亚洲最大的网站<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		世界，你好！</span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-1-2-注意事项"><a href="#10-1-2-注意事项" class="headerlink" title="10.1.2 注意事项"></a>10.1.2 注意事项</h3><ul>
<li><p>&lt; html&gt;标签代表当前页面是一个HTML</p>
</li>
<li><p>&lt; head&gt; 标签中可以声明HTLML页面的相关信息</p>
</li>
<li><p>&lt; body&gt;标签主要用于页面显示</p>
</li>
<li><p>标签要有开始，有结束，成双成对</p>
</li>
<li><p>开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自给关闭&lt; br/&gt;</p>
</li>
<li><p>大多数标签具有属性，属性值要使用引号引起来</p>
</li>
<li><p>HTML本身不区分大小写</p>
</li>
</ul>
<h2 id="10-2-HTML的使用"><a href="#10-2-HTML的使用" class="headerlink" title="10.2 HTML的使用"></a>10.2 HTML的使用</h2><h3 id="10-2-1-文件标签"><a href="#10-2-1-文件标签" class="headerlink" title="10.2.1 文件标签"></a>10.2.1 文件标签</h3><ul>
<li> &lt; html&gt;标签： 代表当前书写的是一个HTML文档 </li>
<li>&lt; head&gt;标签：存储的本页面的一些重要的信息，它不会显示 </li>
<li>&lt; head&gt;标签：有一个子标签&lt; title&gt;它是用来定义页面的标题</li>
<li>&lt; body&gt;标签：书写的内容会显示出来</li>
<li>&lt; body&gt;标签属性：<ul>
<li>text用于设置文字颜色</li>
<li>bgcolor用于设置页面的背景色</li>
<li>background用于设置页面的背景图片</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">text</span>=<span class="string">&quot;red&quot;</span> <span class="attr">bgcolor</span>=<span class="string">&quot;pink&quot;</span> <span class="attr">background</span>=<span class="string">&quot;img/timg.jpg&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-3-排版标签"><a href="#10-3-排版标签" class="headerlink" title="10.3 排版标签"></a>10.3 排版标签</h2><h3 id="10-3-1-HTML注释"><a href="#10-3-1-HTML注释" class="headerlink" title="10.3.1 HTML注释"></a>10.3.1 HTML注释</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    hello 大家好！<span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 第一次和你见面，真的好紧张啊！--&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-3-2-换行标签"><a href="#10-3-2-换行标签" class="headerlink" title="10.3.2 换行标签"></a>10.3.2 换行标签</h3><ul>
<li>&lt; br/&gt;标签就是一个换行(回车)标签，标签中的/可有可无</li>
<li>有/是html语言的标准化，但是html是一门不那么严谨的语言</li>
</ul>
<h3 id="10-3-3-段落标签"><a href="#10-3-3-段落标签" class="headerlink" title="10.3.3 段落标签"></a>10.3.3 段落标签</h3><ul>
<li>在&lt; p&gt;标签中的内容，会在开始与结束之间产生一个空白行</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span>&gt;</span>苑建胜<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>日照香炉生紫烟<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>遥看瀑布挂前川<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>飞流直下三千尺<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>疑是银河落九天<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="10-3-4-水平线标签"><a href="#10-3-4-水平线标签" class="headerlink" title="10.3.4 水平线标签"></a>10.3.4 水平线标签</h3><ul>
<li>&lt; hr&gt;标签会在页面产生一个水平线</li>
<li>常用的属性<ul>
<li>align:可取值left right center 代表水平线位置</li>
<li>size：代表水平线厚度（粗细），默认为5，百分比代表一个像素的百分比</li>
<li>width：代表水平线宽度</li>
<li>color：水平线的颜色</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    教</span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span> <span class="attr">color</span> = <span class="string">&quot;red&quot;</span> <span class="attr">width</span> = <span class="string">&quot;50%&quot;</span>&gt;</span></span><br><span class="line">    育</span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span> <span class="attr">size</span> = <span class="string">&quot;10ox&quot;</span> <span class="attr">color</span> = <span class="string">&quot;blue&quot;</span>&gt;</span></span><br><span class="line">    考</span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span> <span class="attr">width</span> = <span class="string">&quot;30%&quot;</span> <span class="attr">align</span> = <span class="string">&quot;left&quot;</span>&gt;</span></span><br><span class="line">    试</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-3-5-分区标签"><a href="#10-3-5-分区标签" class="headerlink" title="10.3.5 分区标签"></a>10.3.5 分区标签</h3><ul>
<li>div是一个块标签，用来进行布局的 </li>
<li>普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版 <strong>div与span都是“容器”的作用</strong>，具体区别: <ul>
<li>div会自动换行，我们也叫这样的标签为块级元素 </li>
<li>span标签它不会自动换行，我们也叫它为行内元素 </li>
<li>div：整体划分区块 </li>
<li>span：局部划分</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;width:100px; height:100px; background:pink&quot;</span>&gt;</span>大家好！<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;width:100px; height:100px; background:greenyellow&quot;</span>&gt;</span>大家好！<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-4-字体标签"><a href="#10-4-字体标签" class="headerlink" title="10.4 字体标签"></a>10.4 字体标签</h2><h3 id="10-4-1-字体标签"><a href="#10-4-1-字体标签" class="headerlink" title="10.4.1 字体标签"></a>10.4.1 字体标签</h3><ul>
<li>&lt; font&gt;标签可以设置字体，字的大小及颜色，常用属性： <ul>
<li>face:用于设置字体，例如 宋体 隶书 楷体 </li>
<li>size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可） </li>
<li>color:用于设置字的颜色</li>
</ul>
</li>
<li> 注： 我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。 每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0， 0），十六进制表示为#FF0000。</li>
<li> 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可 简化成 #c30 这种方式</li>
<li>  RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">bgcolor</span>=<span class="string">&quot;#FFFFFF&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">font</span> <span class="attr">face</span>=<span class="string">&quot;字魂169号-霓虹体（非商用）&quot;</span> <span class="attr">size</span>=<span class="string">&quot;7&quot;</span> <span class="attr">color</span>=<span class="string">&quot;#C30&quot;</span>&gt;</span>教育考试院<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">font</span> <span class="attr">face</span>=<span class="string">&quot;字魂169号-霓虹体（非商用）&quot;</span> <span class="attr">size</span>=<span class="string">&quot;7&quot;</span> <span class="attr">color</span>=<span class="string">&quot;rgb(99,00,66)&quot;</span>&gt;</span>教育考试院<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">font</span> <span class="attr">face</span>=<span class="string">&quot;字魂169号-霓虹体（非商用）&quot;</span> <span class="attr">size</span>=<span class="string">&quot;7&quot;</span> <span class="attr">color</span>=<span class="string">&quot;#ff0066&quot;</span>&gt;</span>教育考试院<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-4-2-标题标记"><a href="#10-4-2-标题标记" class="headerlink" title="10.4.2 标题标记"></a>10.4.2 标题标记</h3><ul>
<li>h1最大 h6最小，没有h7,它们代表的是标题， <strong>自动换行，字体加粗，标题与标题之间产生一定的距离</strong> </li>
<li>注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是标题1号<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>我是标题2号<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是标题3号<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>我是标题4号<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h5</span>&gt;</span>我是标题5号<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h6</span>&gt;</span>我是标题6号<span class="tag">&lt;/<span class="name">h6</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-4-3-格式化标签"><a href="#10-4-3-格式化标签" class="headerlink" title="10.4.3 格式化标签"></a>10.4.3 格式化标签</h3><ul>
<li><p>&lt; b&gt;字体加粗</p>
</li>
<li><p>&lt; i&gt;字体倾斜 </p>
</li>
<li><p>&lt; del&gt;删除线</p>
</li>
<li><p>&lt; u&gt;下划线 </p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    教育考试<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">b</span>&gt;</span>教育考试<span class="tag">&lt;/<span class="name">b</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span>&gt;</span>教育考试<span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">del</span>&gt;</span>教育考试<span class="tag">&lt;/<span class="name">del</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">u</span>&gt;</span>教育考试<span class="tag">&lt;/<span class="name">u</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-5-列表标记"><a href="#10-5-列表标记" class="headerlink" title="10.5 列表标记"></a>10.5 列表标记</h2><h3 id="10-5-1-有序列表"><a href="#10-5-1-有序列表" class="headerlink" title="10.5.1 有序列表"></a>10.5.1 有序列表<ol></ol></h3><ul>
<li>type=’A’：字母排序 </li>
<li>type=’I’：罗马排序 </li>
<li>start=“3” 序列从几开始</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span> <span class="attr">type</span>=<span class="string">&quot;A&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span> <span class="attr">type</span>=<span class="string">&quot;I&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span> <span class="attr">start</span>=<span class="string">&quot;2&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-5-2-无序列表"><a href="#10-5-2-无序列表" class="headerlink" title="10.5.2 无序列表"></a>10.5.2 无序列表<ul></ul></h3><ul>
<li>type=”disc”：默认，实心圆 </li>
<li>type=”square”：方块 </li>
<li>type=”circle”：空心圆</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>无序列表<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">type</span>=<span class="string">&quot;circle&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">type</span>=<span class="string">&quot;square&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>糖醋里脊<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>打卤面<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>辣子鸡丁<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-6-图像标签"><a href="#10-6-图像标签" class="headerlink" title="10.6 图像标签"></a>10.6 图像标签</h2><ul>
<li>&lt; img&gt;它可以让我们在网页引入一张图片，常用属性： <ul>
<li>src 代表的图片的路径 </li>
<li>width 图片的宽度  </li>
<li>height 图片的高度 </li>
<li>border 用于设置图片的边框 </li>
<li>alt 如果图片加载失败，默认显示的提示信息 </li>
<li>title鼠标悬停图片上，默认显示的文本信息 </li>
<li>align 图片附件文字的对齐方式，可取值有 <ul>
<li>left：把图像对齐到左边 </li>
<li>right：把图像对齐到右边 </li>
<li>middle：把图像与中央对齐 </li>
<li>top：把图像与顶部对齐 </li>
<li>bottom：把图像与底部对齐（默认）</li>
</ul>
</li>
</ul>
</li>
<li>也可以添加动态图片.gif</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    我的最爱</span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/timg.jpg&quot;</span> <span class="attr">width</span>=<span class="string">&quot;900px&quot;</span> <span class="attr">height</span>=<span class="string">&quot;500px&quot;</span> <span class="attr">border</span>=<span class="string">&quot;10px&quot;</span> <span class="attr">title</span>=<span class="string">&quot;你看不到我&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;图片加载失败了&quot;</span> <span class="attr">align</span>=<span class="string">&quot;left&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-7-超链接标签"><a href="#10-7-超链接标签" class="headerlink" title="10.7 超链接标签"></a>10.7 超链接标签</h2><ul>
<li>标签,可以实现跳转到其它页面操作. 超链接内容不仅可以是文本，也可以是图片等信息 常用属性: <ul>
<li>href 代表的我们要跳转的路径 </li>
<li>target 这个属性规定在何处打开这个链接文档，可取值：<ul>
<li> blank 在新窗口中打开页面 </li>
<li>self 默认在本窗口打开页面</li>
<li>top在整个窗口中打开被链接文档</li>
<li>parent 在父框架集中打开被链接文档</li>
</ul>
</li>
</ul>
</li>
<li>跳转互联网的资源，需要补全http://，这是协议部分</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--跳转互联网资源--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://baidu.com&quot;</span>&gt;</span>百度一下你知道<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--跳转本地资源文件--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;01 test.html&quot;</span>&gt;</span>我要跳转到第一个页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--跳转发送邮件--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;mailto:yuanjiansheng2020@163.com&quot;</span>&gt;</span>发送邮件<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--跳转指定qq聊天窗口--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;tencent://message/?uin=577730919&amp;Menu=yes&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">img</span> <span class="attr">border</span>=<span class="string">&quot;0&quot;</span> <span class="attr">src</span>=<span class="string">&quot;http://wpa.qq.com/pa?p=1:615050000:1&quot;</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-8-表格"><a href="#10-8-表格" class="headerlink" title="10.8 表格"></a>10.8 表格</h2><h3 id="10-8-1-基本格式"><a href="#10-8-1-基本格式" class="headerlink" title="10.8.1 基本格式"></a>10.8.1 基本格式</h3><ul>
<li><p>&lt; table&gt;定义一个表格</p>
<ul>
<li>border：边框，取值是像素为单位 </li>
<li>width 代表的表格的宽度 </li>
<li>align 代表表格的对齐方式；取值 <ul>
<li>left 左对齐表格 </li>
<li>right 右对齐表格 </li>
<li>center 居中对齐表格 </li>
</ul>
</li>
<li>cellspacing：单元格间距（通常设置0表示单线表格）</li>
</ul>
</li>
<li><p>&lt; tr&gt;表格中的行 （Table Row） </p>
<ul>
<li>align 代表表格的对齐方式；取值 <ul>
<li>left 左对齐内容（默认值） </li>
<li>right 右对齐内容 </li>
<li>center 居中对齐内容（th 元素的默认值）</li>
</ul>
</li>
</ul>
</li>
<li><p>&lt; td&gt;：表格中的数据单元格 （Table DataCell）</p>
<ul>
<li>colspan 指示列的合并</li>
<li>rowspan 指示行的合并</li>
</ul>
</li>
</ul>
<p><img src="https://gitee.com/crack_of_dawn/typora_picture/raw/master/image-20201118084916645.png" alt="image-20201118084916645"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">&quot;1&quot;</span> <span class="attr">width</span>=<span class="string">&quot;400px&quot;</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span> <span class="attr">cellspacing</span>=<span class="string">&quot;0&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;3&quot;</span>&gt;</span>年度报表<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">rowspan</span>=<span class="string">&quot;3&quot;</span>&gt;</span>收入<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>5<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>6<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>8<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>9<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>11<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>12<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-9-表单标签"><a href="#10-9-表单标签" class="headerlink" title="10.9 表单标签"></a>10.9 表单标签</h2><ul>
<li>表单可以让我们将录入的信息携带到服务器端</li>
<li>通过表单可以将提交的数据提交到指定的位置</li>
<li>表单是将所有的数据形成一个整体，一起提交给服务器</li>
<li>常见的登录页面和注册页面都离不开表单的应用</li>
</ul>
<h3 id="10-9-1-form属性"><a href="#10-9-1-form属性" class="headerlink" title="10.9.1 form属性"></a>10.9.1 form属性</h3><ul>
<li>action： 整个表单提交的目的地</li>
<li>method：表单提交的方式<ul>
<li>get：提交时，传输数据量少，明文提交<ul>
<li>传输普通文字信息，传递照片会失败</li>
<li>在浏览器url后面会显示提交的数据，不适合用于登录</li>
</ul>
</li>
<li>post：提交时，传输数据量大，密文提交<ul>
<li>传递照片和文字都可以</li>
<li>浏览器的url后面看不到提交的数据</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;服务器的地址&quot;</span> <span class="attr">method</span>=<span class="string">&quot;GET&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-9-2-表单元素（控件）"><a href="#10-9-2-表单元素（控件）" class="headerlink" title="10.9.2 表单元素（控件）"></a>10.9.2 表单元素（控件）</h3><ul>
<li><p>&lt; input&gt;元素的type属性 </p>
<ul>
<li>text：默认值，普通的文本输入框 <ul>
<li>placeholder属性：提示文本 </li>
<li>maxlength属性：最多能输入字符数量 </li>
</ul>
</li>
<li>password：密码输入框 </li>
<li>checkbox：多选框/复选框<ul>
<li>checked：被选中 </li>
</ul>
</li>
<li>radio：单选按钮 </li>
<li>file：上传文件 </li>
<li>reset：重置按钮 </li>
<li>submit：提交按钮 </li>
<li>button：普通按钮 </li>
</ul>
</li>
<li><p>&lt; select&gt; 下拉列表/下拉框 </p>
<ul>
<li>&lt; option&gt; 列表中的项 <ul>
<li>selected：被选中 </li>
</ul>
</li>
</ul>
</li>
<li><p>&lt; textarea&gt; 文本域（多行文本框） </p>
<ul>
<li>可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height 和 width 属性。 </li>
</ul>
</li>
<li><p>&lt; button&gt;按钮 </p>
<ul>
<li>在form表单中，作用和submit一样 </li>
<li>不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>账号：<span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;a&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入账号:&quot;</span> <span class="attr">maxlength</span>=<span class="string">&quot;5&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;a&quot;</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入密码:&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>爱好：</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;bobby&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>&gt;</span>抽烟</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;bobby&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">checked</span>=<span class="string">&quot;checked&quot;</span>&gt;</span>喝酒</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;bobby&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>&gt;</span>烫头</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;bobby&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>&gt;</span>泡澡</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            性别：</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span>&gt;</span>男</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span>&gt;</span>女</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            身份：</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;role&quot;</span> <span class="attr">checked</span>=<span class="string">&quot;checked&quot;</span>&gt;</span>学生</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;role&quot;</span>&gt;</span>教师</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;role&quot;</span>&gt;</span>工人</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;role&quot;</span>&gt;</span>警察</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            头像：</span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            血型：</span><br><span class="line">            <span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span>&gt;</span>A型<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span>&gt;</span>B型<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span>&gt;</span>C型<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">selected</span>=<span class="string">&quot;selected&quot;</span>&gt;</span>O型<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            个人简介：</span><br><span class="line">            <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">cols</span>=<span class="string">&quot;10&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;5&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;reset&quot;</span> <span class="attr">value</span>=<span class="string">&quot;清空&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;reset&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;取消&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">button</span>&gt;</span>保存<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同） </li>
<li>单选框要想可以一次只选择一个，要具有相同的name值 </li>
<li>所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值</li>
</ul>
<h2 id="10-10-框架标签"><a href="#10-10-框架标签" class="headerlink" title="10.10 框架标签"></a>10.10 框架标签</h2><ul>
<li>通过&lt; frameset&gt;和&lt; frame&gt;框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页 面。</li>
<li> 注意，框架标签和body标签不共存。“有你没我，有我没你,删掉body标签</li>
</ul>
<p><img src="https://gitee.com/crack_of_dawn/typora_picture/raw/master/17.png" alt="17"></p>
<ul>
<li>框架.html代码</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">frameset</span> <span class="attr">rows</span>=<span class="string">&quot;20%,*,13%&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;top.html&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">frame</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">&quot;15%,*&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;left.html&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">frame</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;right.html&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">frame</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;foot.html&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">frame</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例</li>
<li>*代表剩下的全部</li>
<li>top.html代码</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>顶部导航区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-11-其他标签与特殊字符"><a href="#10-11-其他标签与特殊字符" class="headerlink" title="10.11 其他标签与特殊字符"></a>10.11 其他标签与特殊字符</h2><h3 id="10-11-1-lt-meta-gt-标签"><a href="#10-11-1-lt-meta-gt-标签" class="headerlink" title="10.11.1&lt; meta&gt;标签"></a>10.11.1&lt; meta&gt;标签</h3><ul>
<li>&lt; meat &gt;标签必须写在&lt; head&gt;标签之间</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li> charset:当前页面的字符编码 （gbk：中文简体） </li>
<li>name: 是 viewport （显示窗口） </li>
<li>content=”width=device-width, initial-scale=1.0” 显示窗口宽度是客户端的屏幕宽度(满屏),显示的文字和图形的初始比例是1.0 </li>
<li>每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版 本都以当前版本所支持的最高级标准模式渲染 </li>
<li>通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面(5秒之后跳转到拉勾)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;refresh&quot;</span> <span class="attr">content</span>=<span class="string">&quot;5; url=http://www.lagou.com&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-11-2-link标签"><a href="#10-11-2-link标签" class="headerlink" title="10.11.2 link标签"></a>10.11.2 link标签</h3><ul>
<li>&lt; link&gt;标签也必须写在&lt; head&gt;标签中</li>
</ul>
<h3 id="10-11-3-特殊字符"><a href="#10-11-3-特殊字符" class="headerlink" title="10.11.3 特殊字符"></a>10.11.3 特殊字符</h3><ul>
<li>&amp;nbsp；代表一个空格</li>
<li>&amp;herts；代表爱心</li>
</ul>
<p><img src="https://gitee.com/crack_of_dawn/typora_picture/raw/master/19.png" alt="19"></p>
<p><img src="https://gitee.com/crack_of_dawn/typora_picture/raw/master/20.png" alt="20"></p>
<h2 id="10-11-HTML5新特性"><a href="#10-11-HTML5新特性" class="headerlink" title="10.11 HTML5新特性"></a>10.11 HTML5新特性</h2><h3 id="10-11-1-HTML4与HTML5的区别"><a href="#10-11-1-HTML4与HTML5的区别" class="headerlink" title="10.11.1 HTML4与HTML5的区别"></a>10.11.1 HTML4与HTML5的区别</h3><ul>
<li><p>H5是H4的升级版，H5包含H4</p>
</li>
<li><p>大小写不敏感</p>
<ul>
<li>标签</li>
<li>属性</li>
<li>属性的值</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">tYpe</span>=<span class="string">&quot;paSsWord&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>引号可以省略</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">password</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>省略了结尾标签（运行起来，html自动帮我们补全）</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>哈哈哈哈</span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>哈哈哈哈</span><br></pre></td></tr></table></figure>

<h3 id="10-11-2-H5新增语义化标签"><a href="#10-11-2-H5新增语义化标签" class="headerlink" title="10.11.2 H5新增语义化标签"></a>10.11.2 H5新增语义化标签</h3><ul>
<li>html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此 </li>
<li>新增许多语义化标签，让div“见名知意” <ul>
<li>section标签：表示页面中的内容区域，部分，页面的主体部分 </li>
<li>article标签：文章 </li>
<li>aside标签：文章内容之外的，标题 </li>
<li>header标签：头部，页眉，页面的顶部 </li>
<li>hgroup标签：内容与标题的组合 </li>
<li>nav标签：导航 </li>
<li>figure标签：图文并茂 </li>
<li>foot：页脚，页面的底部</li>
</ul>
</li>
</ul>
<h3 id="10-11-3-媒体标签"><a href="#10-11-3-媒体标签" class="headerlink" title="10.11.3 媒体标签"></a>10.11.3 媒体标签</h3><ul>
<li>想在网页上播放视频，就要使用&lt; video&gt;，属性有：<ul>
<li>src：媒体资源文件的位置</li>
<li>controls：控制面板（暂停和音量的进度条）</li>
<li>autoplay：自动播放（谷歌失效，360浏览器可以）</li>
<li>loop：循环播放</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">src</span>=<span class="string">&quot;img/html-css-js之间的关系.mp4&quot;</span> <span class="attr">controls</span> <span class="attr">loop</span> <span class="attr">autoplay</span>&gt;</span><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-11-4-新增表单控件"><a href="#10-11-4-新增表单控件" class="headerlink" title="10.11.4 新增表单控件"></a>10.11.4 新增表单控件</h3><ul>
<li>表单的控件更加丰富了 ，</li>
<li>&lt; input&gt;,修改type属性： <ul>
<li>color：调色板 </li>
<li>date：日历 </li>
<li>month：月历 </li>
<li>week：周历 </li>
<li>number：数值域 <ul>
<li>min：最小值（默认值是1） </li>
<li>max：最大值（默认值无上限） </li>
<li>step：递增量 </li>
</ul>
</li>
<li>range：滑块 </li>
<li>search：搜索框（带×号，可一键删除框中内容） </li>
</ul>
</li>
<li>&lt; progress&gt;：进度条 </li>
<li>&lt; mark&gt;高亮 </li>
<li>联想输入框&lt; datalist&gt; （模糊查询）<ul>
<li>选项&lt; option&gt;</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span><span class="tag">&lt;<span class="name">mark</span>&gt;</span>教育<span class="tag">&lt;/<span class="name">mark</span>&gt;</span>考试院<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">list</span>=<span class="string">&quot;city&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">&quot;city&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;北京&quot;</span>&gt;</span>模糊查询<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;南京&quot;</span>&gt;</span>模糊查询<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;上海&quot;</span>&gt;</span>模糊查询<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">datalist</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;color&quot;</span>&gt;</span>调色板<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;date&quot;</span> &gt;</span>日历<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;month&quot;</span>&gt;</span>月历<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;week&quot;</span> &gt;</span>周历<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span> <span class="attr">min</span>=<span class="string">&quot;10&quot;</span> <span class="attr">max</span>=<span class="string">&quot;20&quot;</span> <span class="attr">step</span>=<span class="string">&quot;2&quot;</span>&gt;</span>数值域<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;range&quot;</span>&gt;</span>滑块<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;search&quot;</span>&gt;</span>搜索框<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">progress</span>&gt;</span>进度条<span class="tag">&lt;/<span class="name">progress</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  


  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">苑建胜</p>
  <div class="site-description" itemprop="description">亦是生活亦是痴</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">2</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">1</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">苑建胜</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  















  

  

<!-- 页面点击小红心 -->
<script type="text/javascript" src="./js/src/clicklove.js"></script>
</body>
</html>
